<template>
	<div class="login-wrap">
		<div class="top"></div>
		<div class="ms-login">
			<img class="bg1" src="../assets/images/logbg1.png" alt="" />
			<img class="bg2" src="../assets/images/logbg2.png" alt="" />
			<div class="ms-title">登录中心</div>
			<el-form :model="loginForm" :rules="rules" ref="login" label-width="0px" class="ms-content">
				<el-form-item class="loginicon" prop="account">
					<el-input v-model="loginForm.account" placeholder="请输入账号" @input="chengeAccount"
						@focus="showPasswordOn" @blur="showPasswordOff" :show-password="showPassword"></el-input>
				</el-form-item>
				<el-form-item class="loginicon" prop="pwd">
					<el-input type="password" placeholder="请输入密码" @input="chengePwd" v-model="loginForm.pwd"
						@keyup.enter.native="submitForm()" show-password>
					</el-input>
				</el-form-item>
				<div class="login-btn">
					<el-button :disabled="loginForm.regist == ''" type="primary"
						@click="submitForm()">{{ loginForm.regist == "" ? "无系统权限" : "登录" }}</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import API from "@/utils/api.js";

	export default {
		data: function() {
			return {
				loginForm: {
					account: "",
					pwd: "",
					regist: "018f0fa923074726bf0353478b0c49cb", //系统管理平台
				},
				rules: {
					account: [{
							required: true,
							message: "请输入账号名称",
							trigger: "blur"
						},
						{
							required: true,
							min: 2,
							max: 20,
							message: "长度在 2 到 18 个位",
							trigger: "blur",
						},
					],
					pwd: [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							min: 6,
							max: 10,
							message: "长度在 6 到 18 个字符",
							trigger: "blur",
						},
					],
				},
				loading: {},
				showPassword: false,
				permissionAcc: "",
				permissionPwd: "",
			};
		},
		created() {},
		methods: {
			showPasswordOn(val) {
				this.showPassword = false;
			},
			showPasswordOff(val) {
				this.showPassword = true;
			},
			chengeAccount(val) {
				if (val.length < 19) {
					this.permissionAcc = val;
				}
				this.loginForm.account = this.permissionAcc;
			},
			chengePwd(val) {
				if (val.length < 19) {
					this.permissionPwd = val;
				}
				this.loginForm.pwd = this.permissionPwd;
			},
			submitForm() {
				let _this = this;
				_this.$refs.login.validate((valid) => {
					if (valid) {
						_this.openFullScreen();
						_this.login();
					} else {
						return false;
					}
				});
			},
			async login() {
				let _this = this;
				let res = await API.login(_this.loginForm);
				if (res.code == 0 && res.data) {
					sessionStorage.setItem("token", res.data);
					sessionStorage.setItem(
						"beforeOrigin",
						JSON.stringify({
							loginOrigin: window.location.origin,
							loginSysId: null,
						})
					);
					sessionStorage.setItem(
						"loginInfo",
						JSON.stringify({
							account: this.loginForm.account,
							pwd: this.loginForm.pwd,
						})
					);
					_this.loading.close();

					if (res.message != "" || res.message) {
						sessionStorage.setItem(
							"userInfo",
							JSON.stringify({
								name: _this.loginForm.account
							})
						);
						sessionStorage.setItem("companyId", JSON.stringify(res.message));
					} else {
						this.getUserInfo();
					}
				} else {}
				setTimeout(() => {
					_this.loading.close();
				}, 1000);
			},
			async getUserInfo() {
				let _this = this;
				let res = await API.users.BaseInfo();
				if (res && res.code == 0) {
					_this.$router.push("/");
					sessionStorage.setItem("userInfo", JSON.stringify(res.data[0]));
					sessionStorage.setItem("isOrgName", res.data[0].orgName);
				}
			},

			openFullScreen() {
				this.loading = this.$loading({
					lock: true,
					text: "数据处理中......",
					spinner: "el-icon-loading",
					background: "rgba(0, 0, 0, 0.7)",
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	::v-deep .el-input__wrapper.is-focus {
		box-shadow: 0 0 0 1px rgb(67, 107, 200) inset;
	}

	::v-deep .el-input__inner {
		color: white;
	}

	::v-deep .el-input__wrapper {
		padding: 6px 14px !important;
		background-color: #ffffff1e;
		box-shadow: 0 0 0 1px #dcdfe600 inset;
		//   border: 1px solid rgb(67, 107, 200);
		border-radius: 0px;
	}

	::v-deep .el-input__wrapper:focus {
		//   border: 1px solid rgb(67, 107, 200);
	}

	.top {
		position: absolute;
		top: 0;
		width: 100%;
		height: 110px;
		// background-image: url(../assets/images/主界面-素材/标题.png);
		background: url(../assets/images/topBg1.png) no-repeat no-repeat;
		background-size: 100% 100%;
	}

	.login-wrap {
		width: 100vw;
		height: 100vh;
		// background-color: red;
		background-image: url("../assets/images/logbg.png");
		background-repeat: no-repeat no-repeat;
		background-size: 100% 100%;
	}

	.logo {
		padding: 20px;
		position: relative;
	}

	.logo img {
		position: absolute;
		width: 30px;
		height: 30px;
		object-fit: cover;
		display: inline-block;
	}

	.logo span {
		font-size: 24px;
		color: #0077ff;
		padding-left: 40px;
		line-height: 30px;
		display: inline-block;
	}

	.ms-title {
		width: 100%;
		line-height: 50px;
		text-align: center;
		font-size: 24px;
		padding-top: 50px;
		color: #ffffff;
	}

	.ms-login {
		position: absolute;
		left: 50%;
		top: 50%;

		transform: translate(-50%, -50%);
		border-radius: 5px;
		//  background-image: url("../assets/images/logbg2.png");
		//     background-repeat: no-repeat no-repeat;
		//     background-position: center;
		//     background-size: cover;
		// overflow: hidden;
		width: 454px;
		height: 355px;
	}

	.bg1 {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 470px;
		height: 305px;
		z-index: -1;

		transform: translate(-50%, -50%);
	}

	.bg2 {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 458px;
		height: 286px;
		z-index: -1;

		transform: translate(-50%, -50%);
	}

	.ms-content {
		padding: 0px 30px;
	}

	.loginicon {
		position: relative;
		width: 270px;
		margin: 10px auto;
		margin-bottom: 20px;
	}

	.loginicon img {
		width: 30px;
		height: 30px;
		object-fit: cover;
		position: absolute;
		top: 18px;
		left: 25px;
		z-index: 9;
	}

	.login-btn {
		text-align: center;
	}

	.login-btn button {
		width: 180px;
		height: 42px;
		z-index: 666;
		margin-bottom: 30px;
		font-size: 20px;
	}

	.login-tips {
		font-size: 12px;
		line-height: 30px;
		color: #fff;
	}

	.download {
		position: absolute;
		left: 20px;
		width: 150px;
		height: 200px;
		margin: 0 auto;
		text-align: right;
		color: #c0c4cc;
		font-size: 12px;
		margin-top: 600px;
		cursor: pointer;
		color: #409eff;
	}

	.download span {
		float: left;
		padding-left: 5px;
		padding-bottom: 5px;
	}

	img {
		float: left;
		width: 160px;
		height: 160px;
		object-fit: cover;
	}
</style>